<template>
    <div class="childs">
        <div class="header">
            <el-avatar style="width:3vw;height: 3vw;" icon="el-icon-user-solid" shape="circle"
                :src="base_url + it.user.avatar" fit="fill"></el-avatar>
            <span style="margin-left: 1vw;">{{ it.user.username }}</span> <span v-if="it.user.role === '0'"
                style="margin-left: 0.5vw;color:red;font-weight: bold;">管理员</span>
            <img :src="base_url + '/assets/svg/review.svg'" alt=""><span>{{ it.parent.user.username }}</span>
            <span style="margin-left: 2vw;font-size: 0.7vw;">时间:{{ it.publish_date }}</span>
        </div>
        <div class="content">{{ it.comment_text }}</div>
        <div class="replay" @click="replay">回复</div>
    </div>
</template>

<script setup lang="ts">
import DiscussStore from '@/store/DiscussStore';
const base_url = import.meta.env.VITE_APP_URL
const store = DiscussStore()
const props = defineProps(['it'])
const replay = () => {
    console.log(props.it.user.username, props.it._id)
    store.send_replay(props.it.user.username, props.it._id)
}
</script>

<style scoped lang="scss">
.childs {
    width: 90%;
    align-self: flex-end;
    margin-top: 1vw;

    .header {
        display: flex;
        align-items: center;
        font-size: 1vw;

        img {
            width: 1.5vw;
        }
    }

    .content {

        align-self: flex-end;
        width: 89%;
        margin-top: 0.5vw;
        background-color: #88D8B0;
        padding: 1vw;
        border-radius: 10px;
        font-size: 1vw;

    }

    .replay {
        width: 89%;
        text-align: right;
        font-size: 1vw;
        font-weight: bold;
    }
}
</style>